<!doctype html>
<html>
  <head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-132775238-1');
    </script>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&family=Roboto+Mono&display=swap" rel="stylesheet">
    <script type="module" src="../rapidoc-min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>mermaid.initialize({startOnLoad:true});</script>
  </head>
  <body>
    <rapi-doc id="thedoc"
      spec-url = "../specs/slots.yaml" 
      render-style = "view" 
      theme="light" 
      show-header="false"
      regular-font = 'Open Sans'
      mono-font = 'Roboto Mono'
      primary-color="#f54c47"
    > 
      <p style="margin:0; padding:16px 36px; background-color:tomato; color:#fff; text-align:center;" > 
        <b> default</b> slot | <span style="font-size:12px"> A good place to provide internal and external links, Sign In buttons etc</span>
      </p>

      <span slot="overview" >
        <p style="margin-top:10px; padding:16px 36px; background-color:MediumSeaGreen; color:#fff; text-align:center;" > 
          <b> overview</b> slot | <span style="font-size:12px"> good for business flow explenation</span>
        </p>
        <div style="display:flex; flex-direction:column; align-items: center; font-size:13px; color: #777;">
          <div> Provide explenations, diagrams and other HTML controls. You may also style them to your needs</div>
          <img src = "../images/arch.png" style="width:350px;">
        </div>
      </span>

      <p slot="servers" style="margin-top:10px; padding:16px 36px; background-color:SlateBlue; color:#fff; text-align:center;" > 
        <b> servers</b> slot| <span style="font-size:12px"> good for describing about the API gateways, load balancers application servers etc</span>
      </p>

      <span slot="auth" >
        <p style="margin-top:10px; padding:16px 36px; background-color:DodgerBlue; color:#fff; text-align:center;" >
          <b> auth</b> slot | <span style="font-size:12px"> good for describing authentication system</span>
        </p>  
        <div style="display:flex; align-items:center; font-size:13px; color: #777;">
          <div class="mermaid" style="width:400px">
            graph TB
              API-Gateway --> Authentication-Server
              Authentication-Server-->A[fa:fa-ban Invalid Token]
              Authentication-Server-->B[fa:fa-ban Valid Token]
              A --> 401[401 Response Status]
              B --> 200[200 response Status<br/> with JSON payload]
          </div>
          <div style="margin-left:16px;"> 
            You may even introduce some JS based functionality 
            For instance, the digram on the left is generated by a flowchart markup rederer <a target="_blank" href= "https://mermaid-js.github.io/mermaid/#/"> mermaid </a>
            You can change them dynamically using scrpts
            <br/><br/>
            You may also provide HTML buttons and attach scripts to them to perform automatic authentication for your visitors. 
          </div>
        </div>
      </span>

      <span slot="operations-top" >
        <p style="margin-top:10px; padding:16px 36px; background-color:#a5522e; color:#fff; text-align:center;" > 
          <b> overview</b> slot | <span style="font-size:12px"> Good for contents that applies to all operations/api</span>
        </p>
      </span>


      <p slot="tag--user" style="margin-top:10px; padding:16px 36px; background-color:#ac7339; color:#fff; text-align:center;" > 
        <b> tag--user</b> slot
      </p>

      <p slot="tag--Create-User" style="margin-top:10px; padding:16px 36px; background-color:#ac7339; color:#fff; text-align:center;" > 
        <b> tag--Create-User</b> slot
      </p>

      <p slot="post-/users" style="margin-top:10px; padding:16px 36px; background-color:orangered; color:#fff; text-align:center;" > 
        <b> post-/users</b> slot | <span style="font-size:12px"> Inject HTML content specific to a path if needed</span>
      </p>

      <p slot="footer" style="margin:0; padding:16px 36px; background-color:orange; color:#fff; text-align:center;" > 
        <b> footer</b> slot | <span style="font-size:12px"> may provide copyright info and other links</span>
      </p>

      <div slot="nav-logo" style="display: flex; align-items: center; justify-content: center;"> 
        <img src = "../images/dog.png" style="width:40px; margin-right: 20px"> <span style="color:#fff"> <b>nav-logo</b> slot </span>
      </div>

    </rapi-doc>

    <script>
      document.addEventListener('DOMContentLoaded', (event) => {
        let docEl = document.getElementById("thedoc");
        docEl.addEventListener('after-try', (e) => {
          console.log(e.detail);
        });
      })
    </script>

  </body>
</html>